<template>
  <div>
    <el-form
      ref="createMeetingForm"
      :model="createMeetingForm"
      label-width="120px"
    >
      <el-form-item label="会议主题">
        <el-input v-model="createMeetingForm.name"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          :picker-options="dateOptions"
          v-model="createMeetingForm.startDate"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          placeholder="请选择开始时间"
        ></el-date-picker>
        <el-time-select
          v-if="createMeetingForm.startDate"
          v-model="createMeetingForm.startTime"
          :picker-options="timeOptions"
          placeholder="选择时间"
        ></el-time-select>
        <div class="tip">* 如需预约会议请选择日期时间，否则马上开会</div>
      </el-form-item>
      <el-form-item label="流媒体">
        <div class="space-between">
          <div>
            <el-radio-group v-model="createMeetingForm.mode">
              <el-radio :label="1">小型会议</el-radio>
              <el-radio :label="2">大型会议</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="tip">* 如需直播请选择大型会议</div>
      </el-form-item>
      <el-form-item label="会议密码">
        <div class="space-between">
          <div>
            <el-switch
              v-model="createMeetingForm.pwdOption"
              active-text="设置密码"
              inactive-text="不设置密码"
              @change="pwdVisiable=!pwdVisiable"
            ></el-switch>
          </div>
          <div>
            <el-input
              style="width: 300px"
              v-model="createMeetingForm.pwd"
              v-if="pwdVisiable"
              type="password"
              :show-password="true"
              auto-complete="new-password"
              placeholder="请输入1-6位数字密码"
            ></el-input>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="参会人员">
        <el-input
          @focus="sMemberFormVisible = true"
          placeholder="点击选择参会人员"
        ></el-input>
        <!-- <form-dialog
          title="选择参会人员"
          :visible.sync="sMemberFormVisible"
          :appendToBody="true"
          width="750px"
        >
          <select-member
            v-on:smdialogVisible="cmVisible"
            :toSelectFriend="selectFriends"
          ></select-member>
        </form-dialog> -->
        <div class="row-direction">
          <div
            class="column-direction"
            :key="friend.friendId"
            v-for="friend in selectFriends"
          >
            <img
              class="avatarMember"
              :src="friend.friendAvatar"
            />
            <span
              v-if="friend.friendRemark"
              class="friendRemark"
            >{{friend.friendRemark}}</span>
            <span
              v-else
              class="friendRemark"
            >{{friend.friendUserName}}</span>
          </div>
        </div>
      </el-form-item>
      <el-collapse
        v-model="createMeetingForm.highSelect"
        class="collapse"
      >
        <el-collapse-item
          title="高级选项"
          name="1"
        >
          <el-form-item label="生成分享链接">
            <el-col :span="11">
              <el-switch
                v-model="createMeetingForm.link"
                inactive-text="不生成"
                active-text="生成"
              ></el-switch>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="11"></el-col>
          </el-form-item>
          <el-form-item label="使用智能字幕">
            <div class="space-between">
              <div>
                <el-switch
                  v-model="createMeetingForm.subtitleRequired"
                  inactive-text="不使用"
                  active-text="使用"
                  @change="wordVisible?(wordVisible=false):(wordVisible=true)"
                ></el-switch>
              </div>
              <div>
                <el-select
                  v-model="createMeetingForm.speakLang"
                  placeholder="开会语言"
                  v-if="wordVisible"
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in originLanguage"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="createMeetingForm.translateLang"
                  placeholder="对照语言"
                  v-if="wordVisible"
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in toLanguage"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="选择视频画质">
            <el-radio-group v-model="createMeetingForm.videoQuality">
              <el-radio
                v-for="item in videoQualityList"
                :key="item.value"
                :label="item.value"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <ripple-button @click="handleCancel">取 消</ripple-button>
      <ripple-button
        v-show="!isOrder"
        type="primary"
        :loading="loading"
        @click="handleCreateConference"
      >马上开会</ripple-button>
      <ripple-button
        v-show="isOrder"
        type="primary"
        :loading="loading"
        @click="handleCreateConference"
      >预约会议</ripple-button>
    </div>
    <el-dialog
      :visible.sync="sMemberFormVisible"
      append-to-body
      width="800px"
    >
      <dialog-self title="选择参会人员">
        <div class="dialog-box">
          <select-member
            v-on:smdialogVisible="cmVisible"
            :toSelectFriend="selectFriends"
          ></select-member>
        </div>
      </dialog-self>
    </el-dialog>
  </div>
</template>

<script>
import { originLanguage, contrastLanguage } from '@/properties/language'
import SelectMember from './SelectMember'
import { createConference, startConference } from '@/api/conferences'
import { mapGetters } from 'vuex'
import open from '@/mixin/open.js'
export default {
  name: 'CreateMeetingForm',
  mixins: [open],
  components: {
    SelectMember
  },
  data () {
    return {
      loading: false,
      currentUserInfo: '',
      createMeetingForm: {
        name: '',
        startDate: null,
        startTime: null,
        mode: 1,
        hours: '',
        minutes: '',
        pwdOption: false,
        pwd: '',
        link: false,
        subtitleRequired: false,
        speakLang: '',
        translateLang: '',
        highSelect: '',
        videoQuality: '高清'
      },
      dateOptions: {
        disabledDate (date) {
          return (
            (date && date.valueOf() < Date.now() - 84600000) ||
            date > new Date(new Date().getTime() + 86400000 * 14)
          )
        }
      },
      pwdVisiable: false,
      wordVisible: false,
      sMemberFormVisible: false,
      selectFriends: [],
      videoQualityList: [
        {
          value: '流畅',
          label: '流畅'
        },
        {
          value: '高清',
          label: '高清'
        },
        {
          value: '超清',
          label: '超清'
        }
      ],
      toLanguage: contrastLanguage,
      originLanguage: originLanguage
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    }),
    isOrder () {
      return this.createMeetingForm.startDate !== null
    },
    timeOptions () {
      const options = {
        start: '00:00',
        step: '00:30',
        end: '23:30'
      }
      const date = new Date()
      const startDate = new Date(this.createMeetingForm.startDate)
      if (startDate && date.getDate() === startDate.getDate()) {
        let hours = date.getHours()
        let minutes = date.getMinutes()
        if (minutes <= 30) {
          minutes = '30'
        } else {
          minutes = '00'
          hours = hours + 1 + ''
        }
        // options.start = sliceString(hours, 2) + ':' + minutes
        options.start = hours + ':' + minutes
      }
      return options
    }
  },
  watch: {
    timeOptions () {
      this.createMeetingForm.startTime = this.timeOptions.start
    }
  },
  methods: {
    reset () {
      this.createMeetingForm.name = `${this.userInfo.userName}创建的会议`
    },
    handleCancel () {
      this.$emit('cancel')
    },
    // 创建一个会议
    async handleCreateConference () {
      const { startDate, startTime } = this.createMeetingForm
      const memberIds = this.selectFriends.map(({ friendId }) => friendId)
      this.loading = true
      try {
        const { data: { conferenceBase: { cid } } } = await createConference({
          date: startDate ? startDate + ' ' + startTime : '',
          duration: this.createMeetingForm.hours * 60 + this.createMeetingForm.minutes,
          memberIds: memberIds,
          mode: this.createMeetingForm.mode,
          password: this.createMeetingForm.pwd,
          speakLang: this.createMeetingForm.speakLang,
          subtitleRequired: this.createMeetingForm.subtitleRequired,
          title: this.createMeetingForm.name,
          translateLang: this.createMeetingForm.translateLang,
          videoQuality: this.createMeetingForm.videoQuality
        })
        this.loading = false
        this.startConfenrence(cid)
      } catch {
        this.loading = false
      }
    },
    // 主持人开始会议事件
    async startConfenrence (cid) {
      await startConference(cid)
      this.$emit('submit')
      this.openMeetingRoom(cid)
    },
    // 接收selectMember组件传递的Dialog是否展示的值
    cmVisible (val, sFriends) {
      this.sMemberFormVisible = val
      this.selectFriends = sFriends
    }
  }
}
</script>

<style scoped lang="scss">
.row-direction {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.column-direction {
  display: flex;
  flex-direction: column;
}
.el-form-item ::v-deep label {
  padding-right: 35px;
}
.avatarMember {
  display: block;
  width: 40px;
  height: 40px;
  margin: 5px;
}
.friendRemark {
  width: 40px;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collapse {
  border: #ffffff;
  width: 100%;
  height: 80%;
  ::v-deep .el-collapse-item__header {
    font-weight: 500;
    border-bottom: #ffffff;
    color: #000000;
    font-size: 16px;
    width: 100px;
  }
  ::v-deep .el-collapse-item__wrap {
    border: #ffffff;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.tip {
  color: #f56c6c;
  line-height: 20px;
}
.space-between {
  display: flex;
  justify-content: space-between;
}
.dialog-box {
  padding: 10px 20px 10px;
}
</style>
